window.addEventListener("load", function () {
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	console.log(apiTypeData);
	// 功能一:将数组里的对象内容渲染到ul里的li上
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class = 'active' title = ${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class = 'fw-bold' title = ${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title = ${v.keyword}>${v.name}</li>`;
		}
	});
	// console.log($("#apicate-list"));
	$("#apicate-list").innerHTML = html;
	// 功能二:API分类区点击后添加激活样式
	//遍历获取每一个li节点
	$("#apicate-list li").forEach(function (v) {
		//然后给每个li绑定点击事件
		v.addEventListener("click", function () {
			//点击后还需要再遍历一次拿到每个li节点进行样式操作
			$("#apicate-list li").forEach(function (item) {
				//利用排他思想,先让所有的激活样式都清除
				item.classList.remove("active");
			});
			//最后单独给自己添加激活样式
			v.classList.add("active");
			// 功能三:点击之后,将li标签里的内容和keyword联动到下方搜索栏
			// 点击li后,将li的文本内容赋值给strong标签
			$(".searchInput strong").textContent = v.textContent;
			// 点击li后,同时将li的title赋值给input框里的value
			$(".searchInput input").value = v.title;
		});
	});
	// 主体第二部分
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	console.log(listDataArr);
	//功能四:动态渲染卡片区
	/*
		let cardsHtml = "";
		listDataArr.forEach(function (v) {
			cardsHtml += `<li>
            <img src="../images/${v.img} " alt="图片已损坏" />
            <p>${v.name}</p>
            <p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
            <button>申请数据</button>
            ${v.isSpecial ? "<span>企业认证</span>" : ""}
        </li>`;
		});
		$("#cardList").innerHTML = cardsHtml;
		*/

	// 功能五:实现页面分页功能
	$("#pagigation ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#pagigation ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			v.classList.add("active");
			render(v.textContent, 5, listDataArr);
		});
	});
	//功能六:点击页码,显示对应的页数
	function render(pagination, pageSize, arr) {
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		let cardsHtml = "";
		result.forEach(function (v) {
			cardsHtml += `<li>
            <img src="../images/${v.img} " alt="图片已损坏" />
            <p>${v.name}</p>
            <p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
            <button>申请数据</button>
            ${v.isSpecial ? "<span>企业认证</span>" : ""}
        </li>`;
		});
		$("#cardList").innerHTML = cardsHtml;
	}
	render(1, 5, listDataArr);

	// 功能七:蒙层的实现与关闭
	// $('#mask'),$('#cardList'),$('button')
	//给ul绑定点击事件,进行时间委派
	$("#cardList").addEventListener("click", function (e) {
		//然后根据该事件的事件源的localName属性区分,当localName为button时才弹出蒙层
		if (e.target.localName === "button") {
			// 让蒙层显示
			$("#mask").style.display = "block";
			document.body.style.overflow = "hidden";
		}
		// e.target.localName = "button";
	});
	// 给mask蒙层绑定点击事件,点击后关闭蒙层
	$("#mask").addEventListener("click", function () {
		// 让蒙层关闭
		this.style.display = "none";
		document.body.style.overflow = "auto";
	});
	//功能八: 阻止登录框关闭蒙层
	$("#popBox").addEventListener("click", function (e) {
		e.stopPropagation();
	});
	// 功能九:切换登录方式
	console.log($("#loginoption a"));
	$("#loginoption a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#loginoption a").forEach(function (item) {
				item.classList.remove("active");
			});
			v.classList.add("active");
			// 判断 如果索引为0时,显示账号登陆的表单,并且要同时隐藏扫码登录表单
			if (i === 0) {
				$("#account-login").style.display = "block";
				$("#wechat-login").style.display = "none";
			}
			// 如果索引为0时,显示扫码登陆的表单,并且要同时隐藏账号登录表单
			if (i === 1) {
				$("#account-login").style.display = "none";
				$("#wechat-login").style.display = "block";
			}
		});
	});
});
